<template>
  <div class="about">
    <h1>缓动运动</h1>
    <div id="box" class="box" ref="box"></div>
  </div>
</template>
<script>
//缓动动画公式：加速度=（结束值-起始值）/缓动系数    加速度由慢到慢
 import  funs  from '../../utils/animationUtil.js'
export default {
  name: 'test',
  mounted(){
    var box = this.$refs.box;
    box.addEventListener('mouseover',()=>{
        funs.yundongAndToumin(box, {"opacity":30,'width':300})
    })
    box.addEventListener('mouseout',()=>{
        funs.yundongAndToumin(box, {"opacity":100,'width':100})
    })
  
  },
  methods:{

  }
}
</script>
<style scoped>
  #box{
    width: 100px;
    height: 200px;
    position: absolute;
    left: 0px;
    border-radius: 10px;
  }

  .box{
     background: lightblue;
     top:80px;
  }
</style>
